<template>
  <div v-loading="loading">
    <!-- 表格 -->
    <!-- logo图片 -->
    <el-row class="section" id="logo">
      <img :src="Logo" height="50" />
    </el-row>

    <!-- 1. 基本数据 -->
    <WellWorkDetailBase :tableId="tableId" :baseData="baseData" />

    <!-- 2. 水泥浆化验数据 -->
    <el-row class="section">
      <el-row class="title">2：水泥浆化验数据</el-row>
      <el-row type="flex" justify="center">
        <el-col class="row_border" :span="8">实验项目</el-col>
        <el-col class="row_border" :span="8">领浆</el-col>
        <el-col class="row_border row_border_right" :span="8">尾浆</el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col class="row_border" :span="8">水泥类型</el-col>
        <el-col class="row_border" :span="4">{{ topFluid1.mudType }}</el-col>
        <el-col class="row_border" :span="4">{{ topFluid2.mudType }}</el-col>
        <el-col class="row_border" :span="4">{{ tailFluid1.mudType }}</el-col>
        <el-col class="row_border row_border_right" :span="4">{{
          tailFluid2.mudType
        }}</el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col class="row_border" :span="8">基液类型</el-col>
        <el-col class="row_border" :span="4">{{ topFluid1.fluidType }}</el-col>
        <el-col class="row_border" :span="4">{{ topFluid2.fluidType }}</el-col>
        <el-col class="row_border" :span="4">{{ tailFluid1.fluidType }}</el-col>
        <el-col class="row_border row_border_right" :span="4">{{
          tailFluid2.fluidType
        }}</el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col class="row_border" :span="8">混合水氯根（化验室）PPM</el-col>
        <el-col class="row_border" :span="4">{{ topFluid1.cl }}</el-col>
        <el-col class="row_border" :span="4">{{ topFluid2.cl }}</el-col>
        <el-col class="row_border" :span="4">{{ tailFluid1.cl }}</el-col>
        <el-col class="row_border row_border_right" :span="4">{{
          tailFluid2.cl
        }}</el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col class="row_border" :span="8">静止//循环温度 ℃</el-col>
        <el-col class="row_border" :span="4">
          {{ topFluid1.stopTemperature }}/{{ topFluid1.recyleTemperature }}
        </el-col>
        <el-col class="row_border" :span="4">
          {{ topFluid2.stopTemperature }}/{{ topFluid2.recyleTemperature }}
        </el-col>
        <el-col class="row_border" :span="4">
          {{ tailFluid1.stopTemperature }}/{{ tailFluid1.recyleTemperature }}
        </el-col>
        <el-col class="row_border row_border_right" :span="4">
          {{ tailFluid2.stopTemperature }}/{{ tailFluid2.recyleTemperature }}
        </el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col class="row_border" :span="8">井底静压 Mpa</el-col>
        <el-col class="row_border" :span="4">{{
          topFluid1.holePressure
        }}</el-col>
        <el-col class="row_border" :span="4">{{
          topFluid2.holePressure
        }}</el-col>
        <el-col class="row_border" :span="4">{{
          tailFluid1.holePressure
        }}</el-col>
        <el-col class="row_border row_border_right" :span="4">{{
          tailFluid2.holePressure
        }}</el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col class="row_border" :span="8">稠化时间 @ 100BC min</el-col>
        <el-col class="row_border" :span="4">{{
          topFluid1.thickengTime
        }}</el-col>
        <el-col class="row_border" :span="4">{{
          topFluid2.thickengTime
        }}</el-col>
        <el-col class="row_border" :span="4">{{
          tailFluid1.thickengTime
        }}</el-col>
        <el-col class="row_border row_border_right" :span="4">{{
          tailFluid2.thickengTime
        }}</el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col class="row_border" :span="8">水泥浆密度 g/cm³</el-col>
        <el-col class="row_border" :span="4">{{ topFluid1.mudDensity }}</el-col>
        <el-col class="row_border" :span="4">{{ topFluid2.mudDensity }}</el-col>
        <el-col class="row_border" :span="4">{{
          tailFluid1.mudDensity
        }}</el-col>
        <el-col class="row_border row_border_right" :span="4">{{
          tailFluid2.mudDensity
        }}</el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col class="row_border" :span="8">造浆率 m³/ton</el-col>
        <el-col class="row_border" :span="4">{{ topFluid1.mudYield }}</el-col>
        <el-col class="row_border" :span="4">{{ topFluid2.mudYield }}</el-col>
        <el-col class="row_border" :span="4">{{ tailFluid1.mudYield }}</el-col>
        <el-col class="row_border row_border_right" :span="4">{{
          tailFluid2.mudYield
        }}</el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col class="row_border" :span="8">水灰比 m³/ton</el-col>
        <el-col class="row_border" :span="4">{{
          topFluid1.waterCementRatio
        }}</el-col>
        <el-col class="row_border" :span="4">{{
          topFluid2.waterCementRatio
        }}</el-col>
        <el-col class="row_border" :span="4">{{
          tailFluid1.waterCementRatio
        }}</el-col>
        <el-col class="row_border row_border_right" :span="4">{{
          tailFluid2.waterCementRatio
        }}</el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col class="row_border" :span="8">API失水 ml/30min&1000psi</el-col>
        <el-col class="row_border" :span="4">{{
          topFluid1.apiFluidLoss
        }}</el-col>
        <el-col class="row_border" :span="4">{{
          topFluid2.apiFluidLoss
        }}</el-col>
        <el-col class="row_border" :span="4">{{
          tailFluid1.apiFluidLoss
        }}</el-col>
        <el-col class="row_border row_border_right" :span="4">{{
          tailFluid2.apiFluidLoss
        }}</el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col class="row_border" :span="8">自由水 %</el-col>
        <el-col class="row_border" :span="4">{{ topFluid1.freeWater }}</el-col>
        <el-col class="row_border" :span="4">{{ topFluid2.freeWater }}</el-col>
        <el-col class="row_border" :span="4">{{ tailFluid1.freeWater }}</el-col>
        <el-col class="row_border row_border_right" :span="4">{{
          tailFluid2.freeWater
        }}</el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col class="row_border" :span="8">24小时抗压强度 Mpa</el-col>
        <el-col class="row_border" :span="4">{{ topFluid1.pressure24 }}</el-col>
        <el-col class="row_border" :span="4">{{ topFluid2.pressure24 }}</el-col>
        <el-col class="row_border" :span="4">{{
          tailFluid1.pressure24
        }}</el-col>
        <el-col class="row_border row_border_right" :span="4">{{
          tailFluid2.pressure24
        }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-row type="flex" justify="center">
            <el-col class="row_border" :span="12">水泥外加剂（BWOC）</el-col>
            <el-col :span="12">
              <el-row
                v-for="(item, id) in bwoc"
                :key="id"
                type="flex"
                justify="center"
              >
                <el-col class="row_border bwoc-row" :span="24">{{
                  item.materialName || '&nbsp;'
                }}</el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="16">
          <el-row
            v-for="(item, id) in bwoc"
            :key="id"
            type="flex"
            justify="center"
          >
            <el-col class="row_border bwoc-row" :span="6">{{
              item.firstHead || '&nbsp;'
            }}</el-col>
            <el-col class="row_border bwoc-row" :span="6">{{
              item.secondHead || '&nbsp;'
            }}</el-col>
            <el-col class="row_border bwoc-row" :span="6">{{
              item.firstTail || '&nbsp;'
            }}</el-col>
            <el-col class="row_border bwoc-row row_border_right" :span="6">{{
              item.secondTail || '&nbsp;'
            }}</el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-row>

    <!-- 3. 施工数据 -->
    <el-row class="section">
      <el-row class="title">3：施工数据</el-row>
      <el-row type="flex" justify="center">
        <el-col class="row_border" :span="4">Time</el-col>
        <el-col class="row_border" :span="8">项目</el-col>
        <el-col class="row_border" :span="3">量</el-col>
        <el-col class="row_border" :span="3">排量</el-col>
        <el-col class="row_border" :span="3">流体密度</el-col>
        <el-col class="row_border row_border_right" :span="3">泵压</el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col class="second_head" :span="2">From</el-col>
        <el-col class="second_head" :span="2" style="border: none">To</el-col>
        <el-col class="second_head" :span="8"></el-col>
        <el-col class="second_head" :span="3">m³</el-col>
        <el-col class="second_head" :span="3">m³/min</el-col>
        <el-col class="second_head" :span="3">g/cm³</el-col>
        <el-col class="second_head row_border_right" :span="3">Mpa</el-col>
      </el-row>
      <el-row
        v-for="(item, id) in workData"
        :key="id"
        type="flex"
        justify="center"
      >
        <el-col class="row_border" :span="2">{{
          item.startTime || '&nbsp;'
        }}</el-col>
        <el-col class="row_border" :span="2" style="border-left: none">{{
          item.endTime
        }}</el-col>
        <el-col class="row_border" :span="8" style="text-align: left">{{
          item.workItem
        }}</el-col>
        <el-col class="row_border" :span="3">{{ item.vol }}</el-col>
        <el-col class="row_border" :span="3">
          {{
            `${item.dispMin ? item.dispMin : ''}${
              item.dispMax ? '-' + item.dispMax : ''
            }`
          }}
        </el-col>
        <el-col class="row_border" :span="3">{{ item.fluidDensity }}</el-col>
        <el-col class="row_border row_border_right" :span="3">
          {{
            `${item.pumpMin ? item.pumpMin : ''}${
              item.pumpMax ? '-' + item.pumpMax : ''
            }`
          }}
        </el-col>
      </el-row>
    </el-row>

    <!-- 4. 材料消耗 -->
    <el-row class="section">
      <el-row class="title">4：材料消耗</el-row>
      <el-row type="flex" justify="center">
        <el-col class="row_border" :span="4">固体添加剂(代号)</el-col>
        <el-col class="row_border" :span="3">用量</el-col>
        <el-col class="row_border" :span="3">单位</el-col>
        <el-col class="row_border" :span="8">固井附件</el-col>
        <el-col class="row_border" :span="3">用量</el-col>
        <el-col class="row_border row_border_right" :span="3">单位</el-col>
      </el-row>
      <el-row
        v-for="id in materialLength"
        :key="id"
        type="flex"
        justify="center"
      >
        <!-- material.additives -->
        <el-col class="row_border" :span="4">{{
          additives[id - 1] && additives[id - 1].additiveName
            ? additives[id - 1].additiveName
            : '&nbsp;'
        }}</el-col>
        <el-col class="row_border" :span="3">{{
          additives[id - 1] ? additives[id - 1].amount : ''
        }}</el-col>
        <el-col class="row_border" :span="3">{{
          additives[id - 1] ? additives[id - 1].unit : ''
        }}</el-col>
        <!-- material.accessories -->
        <el-col class="row_border" :span="8">{{
          accessories[id - 1] && accessories[id - 1].accessoryName
            ? accessories[id - 1].accessoryName
            : '&nbsp;'
        }}</el-col>
        <el-col class="row_border" :span="3">{{
          accessories[id - 1] ? accessories[id - 1].amount : ''
        }}</el-col>
        <el-col class="row_border row_border_right" :span="3">{{
          accessories[id - 1] ? accessories[id - 1].unit : ''
        }}</el-col>
      </el-row>
    </el-row>

    <!-- 5. 施工人员 -->
    <el-row class="section">
      <el-row class="title">5：施工人员</el-row>
      <el-row type="flex" justify="center">
        <el-col class="row_border" :span="8">固井工程师</el-col>
        <el-col class="row_border" :span="8">操作工程师</el-col>
        <el-col class="row_border row_border_right" :span="8">操作手</el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col class="row_border" :span="8">{{
          workPersons.cementEngineer || '&nbsp;'
        }}</el-col>
        <el-col class="row_border" :span="8">{{
          workPersons.operatEngineer || '&nbsp;'
        }}</el-col>
        <el-col class="row_border row_border_right" :span="8">{{
          workPersons.manipulator || '&nbsp;'
        }}</el-col>
      </el-row>
    </el-row>
  </div>
</template>

<script>
import { getWellCasingSizeReport } from '../../../../api/module/dataquery.js'
import WellWorkDetailBase from './wellWorkDetailBase'
import Logo from '../../../../assets/wellWorkDetail_Logo.png'

export default {
  name: 'WellReport',
  props: {
    wellName: {
      type: String,
      default: '',
    },
    casingSize: {
      type: String,
      default: '',
    },
  },
  components: {
    WellWorkDetailBase,
  },
  watch: {
    casingSize() {
      this.getData()
    },
  },
  data() {
    return {
      Logo,
      loading: false,
      tableId: '1',
      baseData: {}, // 1. 基础数据 + 5. 施工人员
      mudData: {}, // 2. 水泥浆化验数据
      mudProperties: [], // 2.1 泥浆性能
      topFluid1: {},
      topFluid2: {},
      tailFluid1: {},
      tailFluid2: {},
      bwoc: [{}], // 2.2 泥浆配方
      workData: [{}], // 3. 施工数据
      material: {}, // 4. 材料消耗
      additives: [{}], // 4.1 固井添加剂
      accessories: [{}], // 4.2 固井附件
      materialLength: 0, // 4 的长度
      workPersons: {}, // 5. 施工人员
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    /**
     * 作用：传入井名和套管尺寸，获取数据
     * { String } wellname
     * { String } casingSize
     */
    getData() {
      this.loading = true
      const queryData = { wellName: this.wellName, casingSize: this.casingSize }
      getWellCasingSizeReport(queryData)
        .then((res) => {
          this.tableId = res.data.data.tableId || '1'

          this.dealBaseData(res.data.data.basic)

          this.dealMudData(res.data.data.mudData)

          this.dealWorkData(res.data.data.workData)

          this.dealMaterial(res.data.data.material)

          this.loading = false
        })
        .catch((err) => {
          this.$message.error('查询报告失败，请返回重新查询！')
        })
    },

    /**
     * 作用：处理基本数据 和 施工人员数据
     * { object } base：传入 basic 数据对象
     */
    dealBaseData(base) {
      // 1. 处理基本数据
      this.baseData = base || {
        wellName: this.wellName,
        casingSize: this.casingSize,
      }

      // 2. 处理施工人员数据
      this.workPersons = {
        cementEngineer: this.baseData.cementEngineer || '',
        operatEngineer: this.baseData.operatEngineer || '',
        manipulator: this.baseData.manipulator || '',
      }
    },

    /**
     * 作用：处理水泥浆化验数据
     * { object } mud：传入 mudData 对象，默认为空对象
     */
    dealMudData(mud = {}) {
      // 1. 处理 bwoc 数据
      this.bwoc = mud.bwoc && mud.bwoc.length ? mud.bwoc : [{}, {}, {}]

      // 2. 处理基础化验的数据
      const items = {
        领浆1: 'topFluid1',
        领浆2: 'topFluid2',
        尾浆1: 'tailFluid1',
        尾浆2: 'tailFluid2',
      }
      this.topFluid1 = {}
      this.topFluid2 = {}
      this.tailFluid1 = {}
      this.tailFluid2 = {}
      const arr = mud.mudProperties || []
      if (arr && arr.length) {
        arr.forEach((a) => {
          let item = a.exprementItem + a.itemNo
          this[items[item]] = a
        })
      }
    },

    /**
     * 作用：处理施工数据
     * { array } arr：传入 workData 数据数组
     */
    dealWorkData(arr = [{}]) {
      this.workData = [{}]
      this.workData = arr
    },

    /**
     * 作用：处理材料消耗数据
     * { object } material：传入 material 对象数据
     */
    dealMaterial(material = {}) {
      this.material = {}
      this.additives = material.additives || [{}]
      this.accessories = material.accessories || [{}]
      this.materialLength =
        this.additives.length > this.accessories.length
          ? this.additives.length
          : this.accessories.length
    },
  },
}
</script>

<style scoped>
.section {
  margin-bottom: 20px;
  border-bottom: 1px solid black;
}
.title {
  text-align: left;
  font-size: 1rem;
  font-weight: bold;
}

.second_head {
  text-align: center;
  border-left: 1px solid black;
  font-size: 0.8rem;
  word-wrap: break-word;
}
.row_border {
  border-top: 1px solid black;
  border-left: 1px solid black;
  text-align: center;
  font-size: 0.8rem;
  word-wrap: break-word;
}
.row_border_right {
  border-right: 1px solid black;
}
.bwoc-row {
  height: 21px;
  line-height: 21px;
}
</style>
